<template>
    <div  v-loading="loading" class="rigth">
        <el-table  :header-cell-style="{ backgroundColor: 'var(--backcor)' }"  :cell-style="{ height: '50px', backgroundColor: 'var(--backcor)' }" :data="user" class="table">
           
            <el-table-column fixed label="头像" min-width="150">
                <template #default="scope">
                    <img :src=" scope.row.imageUrl" lazy />
                </template>
            </el-table-column>
            <el-table-column  prop="userId" label="ID" min-width="250" />
            <el-table-column prop="userName" label="姓名" min-width="170" />
            <el-table-column label="组织" min-width="160">
                <template #default="scope">
                    {{ organizationName }}
                </template>
            </el-table-column>
            <el-table-column label="组织ID" min-width="160">
                <template #default="scope">
                    {{ organizationId }}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import { showDetail } from '@/request/api'
import type { UserList } from '@/type/organization'
let loading=ref(false)
let user = reactive<UserList[]>([])         //当前组织下的用户集合
let organizationName = ref<string>('')      //组织名称
let organizationId=ref<number>(0)           //组织ID
const getShowDetail = (id: string) => {
    loading.value=true
    showDetail(id).then(res => {
        user.length = 0
        organizationName.value = res.data.organizationName
        organizationId.value=res.data.organizationId
        user.push(...res.data.userList)
        loading.value=false
    })

}
getShowDetail('1')
defineExpose({
    getShowDetail
});
</script>

<style lang=less  scoped>
.rigth {
    flex: 1;
    position: relative;

    img {
        height: 40px;
        border-radius: 50%;
        aspect-ratio: 1/1;
    }

    .table {
        position: absolute;
        width: 100%;
        height: 100%;

    background-color: @backColor;
    color: @color;

    }
}
</style>